<template>
    <span style="color: #409EFF;position: absolute;top:8%;right: 11%;">无障碍 | 爱心版 |
        <el-dropdown @command="handleCommand" class="pointer">
            <span style="color: #409EFF;">
                English <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="已切换">简体中文</el-dropdown-item>
                    <el-dropdown-item command="unexploit">English</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown> |
        <el-dropdown @command="handleCommand" class="pointer">
            <span style="color: #409EFF;">
                我的12306 <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="orders">火车票订单</el-dropdown-item>
                    <el-dropdown-item command="waitorder">候补订单</el-dropdown-item>
                    <el-dropdown-item command="unexploit">计次·定期票订单</el-dropdown-item>
                    <el-dropdown-item command="unexploit">约号订单</el-dropdown-item>
                    <el-dropdown-item command="myticket">本人车票</el-dropdown-item>
                    <el-dropdown-item command="unexploit" divided>我的餐饮·特产</el-dropdown-item>
                    <el-dropdown-item command="unexploit">我的保险</el-dropdown-item>
                    <el-dropdown-item command="myvip">我的会员</el-dropdown-item>
                    <el-dropdown-item command="view" divided>查看个人信息</el-dropdown-item>
                    <el-dropdown-item command="accountsecurity">账户安全</el-dropdown-item>
                    <el-dropdown-item command="passenger" divided>乘车人</el-dropdown-item>
                    <el-dropdown-item command="address">地址管理</el-dropdown-item>
                    <el-dropdown-item command="unexploit" divided>温馨服务查询</el-dropdown-item>

                </el-dropdown-menu>
            </template>
        </el-dropdown> |
    </span>
    <span style="position: absolute;top:7%;right: 3%;">
        <el-button text style="background-color: transparent;" @click="ToLogin" v-show="!show">登录</el-button>
        <el-button text style="background-color: transparent;" @click="ToRegister" v-show="!show"> 注册</el-button>

        <!-- <el-button text style="background-color: transparent;" v-show="show"> 您好,{{ name }}</el-button> -->
        <span v-show="show" style="position: relative;left: 30px;">您好,<span style="color: orange;">{{ name }}</span></span>
        <el-button text style="background-color: transparent;position: relative;left: 30px;color: #409EFF;" @click="ToLogin" v-show="show">退出</el-button>

    </span>
</template>

<script setup lang="ts">

import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

import { storeToRefs } from 'pinia'

import { useTopinfoStore } from '../../stores/topinfo'


const topinfoStore = useTopinfoStore()

const { name, show } = storeToRefs(topinfoStore)


let name1 = sessionStorage.getItem('name');
if (name1 != null && name1 != '') {
    topinfoStore.showTopinfo(name1)
}


let router = useRouter()

const handleCommand = (command) => {

    if (command === 'unexploit')
        ElMessage.error('该功能暂未开放')
    else {
        if(sessionStorage.getItem('user')==null||sessionStorage.getItem('user')=='')
        {
            ElMessage.error('请先登录！')
            router.push("/")
        }
        else
        router.push("/"+command)
    }
}


let ToLogin = () => {
    sessionStorage.setItem('user','')
    sessionStorage.setItem('name','')
    router.push('/')
}

let ToRegister = () => {
    router.push('/register')
}

</script>


<style scoped>
.pointer:hover {
    cursor: pointer;
    /*光标呈现为指示链接的指针（一只手）*/
}
</style>